<template>
  <div class="userBox bg-f2" id="userBig">
    <div class="bg-f2 bg-fff">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>
          <span @click="goBack" class="goTitle">资产分组</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ fzxq.sbzmc }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-table
          stripe
          ref="zhankai"
          @select="isCheck"
          @select-all="isCheckAll"
          @row-dblclick="rowClick"
          :data="rolelist"
          border
          highlight-current-row
          :default-sort="{ prop: 'type', order: 'descending' }"
          :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        >
          <template slot="empty">{{ tableMessage }}</template>
          <el-table-column type="selection" width="45"></el-table-column>
          <el-table-column type="index" label="序号" min-width="50" align="center" />
          <el-table-column label="资产名称" min-width="150" prop="zcmc" sortable show-overflow-tooltip></el-table-column>
          <el-table-column label="资产类型" prop="zclxmc" show-overflow-tooltip="true">
            <template slot-scope="scope">
              <!-- <div> -->
              <span>{{ scope.row.zclxmc1 ? scope.row.zclxmc1 + ' / ' : '' }}</span>
              <span>{{ scope.row.zclxmc2 ? scope.row.zclxmc2 + ' / ' : '' }}</span>
              <span>{{ scope.row.zclxmc }}</span>
              <!-- </div> -->
            </template>
          </el-table-column>
          <el-table-column label="辖区" prop="csmc" min-width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="IP地址" prop="ip" min-width="120"></el-table-column>
          <el-table-column label="品牌" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.ppmc }}</span>
            </template>
          </el-table-column>
          <el-table-column label="型号" min-width="120" show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.xh }}</span>
            </template>
          </el-table-column>
          <el-table-column label="安装时间" prop="azrq" sortable>
            <template slot-scope="scope">{{ scope.row.azrq | dateFormat2 }}</template>
          </el-table-column>
          <el-table-column label="维保期限" width="84">
            <template slot-scope="scope">
              <el-tag v-show="scope.row.bxq === 0 ? false : true">{{ scope.row.bxq > 9 ? scope.row.bxq : '0' + scope.row.bxq }}个月</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="国标编码" prop="gbbm" show-overflow-tooltip></el-table-column>
          <el-table-column label="设备序列码" min-width="140" prop="sbxlh" show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="资产状态" prop="zczt">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.zczt === '1'" type="success" size="medium">{{ '使用中' }}</el-tag>
              <el-tag v-else-if="scope.row.zczt === '2'" type="info" size="medium">{{ '停用' }}</el-tag>
              <el-tag v-else-if="scope.row.zczt === '3'" type="danger" size="medium">{{ '报废审核中' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" min-width="150" prop="tjsj" sortable>
            <template slot-scope="scope">{{ scope.row.tjsj | dateFormat }}</template>
          </el-table-column>
        </el-table>
        <div class="fooer_box">
          <div>
            <el-button type="danger" size="small" v-if="!btn2" :disabled="deleteAll.length > 0 ? false : true" @click="dialogVisible3 = true">移除分组</el-button>
          </div>
          <el-dialog title="批量移除分组" :visible.sync="dialogVisible3" width="30%">
            <span>您确定要移除分组吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible3 = false">取 消</el-button>
              <el-button type="primary" @click="deleteItem3" v-preventReClick>确 定</el-button>
            </span>
          </el-dialog>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ziC } from '../../utils/allUrl.js'
import { setUrl } from '../../utils/getUrl.js'
// import { startLoading, endLoading } from '../../utils/loading.js'
export default {
  data: function () {
    return {
      fzxq: {
        sbzmc: '',
      },
      rolelist: [],
      unitList: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible3: false, // 批量删除
      deleteAll: [], // 批量删除数组
      btn2: false,
      tableMessage: '',
    }
  },
  created: function () {
    const { content, btnShow } = this.$route.params
    if (btnShow) {
      this.btn2 = btnShow.showBtn2
    }
    if (content) {
      this.fzxq = content
    }
    this.getList()
  },
  mounted: function () {
    // startLoading(document.getElementById('userBig'))
  },
  methods: {
    async getList() {
      // const a = setTimeout(() => {
      //   endLoading()
      // }, 30000)
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('SBZ_ID', this.fzxq.id)

      const { data: res } = await this.$http.post(`${ziC}zdyfzsb/list`, params)
      // clearTimeout(a)
      // endLoading()
      if (res.code === '0014') {
        return ''
      } else if (res.code === '0013') {
        this.total = 0
        return (this.rolelist = [])
      } else if (res.code !== '0000') {
        return (this.tableMessage = res.message)
        // this.$message({
        //   type: 'error',
        //   message: res.message,
        //   center: true
        // })
      }
      this.rolelist = res.data.list
      this.total = res.data.countList
    },
    // 多选删除
    isCheck(selection, row) {
      const arrs = []
      selection.forEach((item) => {
        arrs.push(item.id)
      })
      const s1 = new Set(arrs)
      this.deleteAll = [...s1]
    },
    isCheckAll(selection, row) {
      const arrs = []
      selection.forEach((item) => {
        arrs.push(item.id)
      })
      const s1 = new Set(arrs)
      this.deleteAll = [...s1]
    },
    async deleteItem3() {
      this.dialogVisible3 = false
      const params = new URLSearchParams()
      params.append('ids', this.deleteAll)
      params.append('SBZ_ID', this.fzxq.id)
      const { data: res } = await this.$http.post(`${ziC}zdyfzsb/deletes`, params)
      if (res.code === '0014') {
        return ''
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.deleteAll = []
      this.getList()
      return this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getList()
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      this.getList()
    },
    rowClick(row, column, event) {
      const a = this.deleteAll.findIndex((item) => item === row.id)
      if (a !== -1) {
        this.deleteAll.splice(a, 1)
        this.$refs.zhankai.toggleRowSelection(row, false)
      } else {
        this.deleteAll.push(row.id)
        const s1 = new Set(this.deleteAll)
        this.deleteAll = [...s1]
        this.$refs.zhankai.toggleRowSelection(row, true)
      }
    },
    goBack: function () {
      setUrl('property', 'propertyGrouping')
      this.$router.push('/propertyGrouping')
    },
  },
}
</script>
<style lang="scss" scoped>
.userBox {
  position: relative;
  // margin-top: 15px;
  .goTitle {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
  }
  .el-table {
    margin-top: 15px;
    border: 1px solid #eaeaea;
    border-bottom: 0;
    .minImg {
      margin-right: 5px;
    }
    .operation {
      display: inline-block;
      margin: 0 5px;
      height: 10px;
      border-left: 1.5px solid #b3b3b3;
    }
  }
  .fooer_box {
    height: 48px;
    line-height: 48px;
    padding: 0 15px;
    box-sizing: border-box;
    border-top: none;
    border: 1px solid #eaeaea;
    border-top: 0;
    display: flex;
    justify-content: space-between;
    .el-pagination {
      padding: 6px 5px;
    }
  }
}
</style>
